<template>
  <el-dialog title="详情页" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
	<el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-tabs v-model="activeName">
        <el-tab-pane label="储值卡信息" name="first">
          <el-form :model="dataForm" ref="dataForm" size="medium" label-width="80px">
            <el-form-item label="储值卡号" prop="cardNum" >
              <el-input v-model="dataForm.cardNum" placeholder="储值卡号" disabled></el-input>
            </el-form-item>
            <el-form-item label="发放部门" prop="saleDeptId">
              <el-select v-model="dataForm.saleDeptId" placeholder="请选择" disabled>
                <el-option
                  v-for="item in deptIdOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="卡内金额" prop="balance">
              <el-input v-model="dataForm.balance" placeholder="卡内金额" disabled></el-input>
            </el-form-item>
            <el-form-item label="绑定会员" prop="customerId">
              <el-input v-model="dataForm.customerId" placeholder="绑定会员" disabled></el-input>
            </el-form-item>
            <el-form-item label="身份证号码" prop="idNumber">
              <el-input v-model="dataForm.idNumber" placeholder="身份证号码" disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="dataForm.phone" placeholder="手机号码" disabled></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="dataForm.password" placeholder="密码" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="memo">
              <el-input v-model="dataForm.memo" placeholder="备注" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="储值卡记录" name="second">
          <el-table :data="dataForm.infos" border v-loading="dataListLoading" header-cell-class-name="miui-header-cell-style">
            <el-table-column prop="changeType" label="储值卡变更类型" :formatter="formatter"></el-table-column>
            <el-table-column prop="createTime"label="变更时间"></el-table-column>
            <el-table-column prop="username" label="操作人"></el-table-column>
            <el-table-column prop="realPayMoney" label="实付金额"></el-table-column>
            <el-table-column prop="givenMoney" label="赠送金额"></el-table-column>
            <el-table-column prop="changeMoney" label="变更金额/储值金额"></el-table-column>
            <el-table-column prop="balance" label="余额"></el-table-column>
            <el-table-column prop="billId" label="单号"></el-table-column>
            <el-table-column prop="changeDeptId" label="变更部门"></el-table-column>
            <el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
  </el-dialog>
</template>

<script>
import { getInfoObj } from "@/api/eims/savemoneycard";
import { getDeptInfo } from "@/api/admin/dept"
export default {
  data() {
    return {
      visible: false,
      activeName: 'first',
      dataForm: {
        id: 0
      },
      deptIdOptions: [],
      dataListLoading: false
    };
  },
  methods: {
    init(data) {
      this.dataForm.id = data || 0
      this.getDataList()
      this.visible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields()
        if (this.dataForm.id) {
          this.dataListLoading = true
          getInfoObj(this.dataForm.id).then(response => {
            if(response.data.code == '0'){
              this.dataForm = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false
          })
        }
      })
    },
    formatter(row, column, cellValue, index) {
      switch (cellValue) {
        case 1:
          return '建卡'
          break
        case 2:
          return '结款'
          break
        case 3:
          return '充值'
          break
        case 4:
          return '提现'
          break
      }
    },
    getDataList(){
      getDeptInfo().then(response => {
        if(response.data.code == '0'){
          let result = response.data.data
          let list = []
          result.forEach(item => {
            list.push({ value: item.id, label: item.name })
          })
          this.deptIdOptions = list
        }else{
          this.$message.error(response.data.msg)
        }
      })
    }
  }
}
</script>
